<template>

  <div>
    <!--    顶部-->
    <div style="width: 100%;height: 80px;">
        <span style="float: left;margin-top: 25px;margin-left: 15px;font-size: 35px" @click="towalletindex">
          &lt;
        </span>
      <span style="float: right;margin-top: 25px;margin-right: 130px;font-size: 25px;">
        开通免密支付
        </span>
    </div>
    <!--    中间-->
    <div style="width: 100%;height: 833px;background:#f3fcff;">
      <div style="width: 100%;height: 50px;font-size: 20px;font-weight: bold;line-height: 50px;">
        微信免密支付
      </div>
      <div style="width: 350px;height: 720px;margin: auto;position: relative;">
        <div style="width: 350px; height: 60px;text-align: center;line-height: 60px">
          <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left">
            开通账号:
          </div>
          <div style="height: 60px;width: 230px;float: left;text-align: left">
            {{ user.driverPhone }}
          </div>
        </div>
        <div style="width: 350px; height: 60px;text-align: center;line-height: 60px">
          <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left">
            套餐内容:
          </div>
          <div style="height: 60px;width: 230px;float: left;text-align: left">
            免密支付车费,单词最高500元
          </div>
        </div>
        <div style="width: 350px; height: 100px; background: white">
          <div style="width: 350px;height: 60px;background: white">
            <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left;line-height: 60px">
              优先扣款方式:
            </div>
            <div style="height: 60px;width: 230px;float: left;text-align: left;line-height: 60px">
              零钱
            </div>
          </div>
          <div style="width: 350px;height: 40px;line-height: 40px;text-align: left">
            <span style="font-size: 14px">
              所选支付方式无法扣款时，将改用账号中其他支付方式
            </span>
          </div>
        </div>
        <el-button type="1primary" round style="margin-top: 25px;width: 330px;background: #2d83fb;color: white;"
                   @click="openSecretfree"
        >开通免密支付
        </el-button>
        <div style="position: absolute;bottom: 0;left: 0;width: 350px;height: 50px;line-height: 50px">
          <span>您已阅读并同意</span>
          <span style="color: #288DFB">《扣款授权确认书》</span>
        </div>
        <!--        <div style="position: absolute;bottom: 0;left: 0;background: #288DFB;width: 350px;height: 50px;text-align: center;line-height: 50px">-->
        <!--          <span>您依阅读并同意</span>-->
        <!--          <span style="color: #288DFB">《扣款授权确认书》</span>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>


<script>
import {openSecretfree} from "@/components/api/wallet/wallet";

// @zhaomingshuo
export default {
  data() {
    return {
      user: null,
      driversWallet: null,

    };
  },
  methods: {
    // 开通免密支付
    openSecretfree() {
      openSecretfree(this.driversWallet.id).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.$router.push({
            path: '/secretfree',
          })
        }
      })

    },
    // 跳转到钱包页面
    towalletindex() {
      this.$router.push({
        path: '/walletindex',
      })
    },
    // 不登陆跳转到登录
    users() {
      this.user = JSON.parse(window.localStorage.getItem("personalUser"));
      console.log(this.user);
      if (this.user == null) {
        this.$router.push({
          path: '/personalUser',
        })
        return;
      }
      this.driversWallet = this.$route.query.item;
    }
  },
  created() {
    this.users();
  }
};
</script>
<style>

</style>
